@import '@/uni.scss';
::v-deep.uContainer {
	padding-bottom: 0;
	height: 100%;
}
.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.contentBg {
		margin-top: 100rpx;
		width: 100%;
		min-height: calc(100% - 100rpx);
		background: $uni-bg-color;
		border-radius: 30rpx 30rpx 0 0;
		.content {
			position: relative;
			top: -80rpx;
			width: 100%;
			min-height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.card {
				width: 690rpx;
				background: #000;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				.userInfo {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.avatar {
						margin: 20rpx 30rpx;
						width: 112rpx;
						height: 112rpx;
						background: $uni-bg-color;
						border-radius: 50%;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						> image {
							width: 100%;
							height: 100%;
						}
					}
					.midd {
						margin: 20rpx 0;
						flex: 1;
						display: flex;
						flex-direction: column;
						> text {
							color: $xxf-gold;
						}
						> .userName {
							font-weight: bold;
							font-size: 32rpx;
						}
						> .userLabel {
							margin-top: 10rpx;
							font-weight: 400;
							font-size: 26rpx;
						}
					}
					.right {
						margin: 20rpx 30rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						> text {
							font-weight: bold;
							font-size: 56rpx;
							color: $uni-secondary-color !important;
						}
						> .txtGold {
							color: $xxf-gold !important;
						}
					}
				}

				.cardInfo {
					margin: 0 30rpx;
					padding: 20rpx 0;
					border-top: 1rpx dotted $xxf-gold;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					> text {
						font-weight: 400;
						font-size: 26rpx;
						color: $xxf-gold;
					}
				}
			}
			.privilege {
				margin-top: 20rpx;
				width: 690rpx;
				background: #fff;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.title {
					padding: 30rpx;
					> text {
						font-weight: 400;
						font-size: 28rpx;
						color: #000;
					}
				}
				.itemArr {
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.item {
						margin: 10rpx 0;
						width: 33%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						::v-deep.uni-icons {
							color: $xxf-gold !important;
						}
						> text {
							margin-top: 20rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #000;
						}
					}
				}
				.privilegeBtn {
					margin: 30rpx;
					width: 580rpx;
					height: 72rpx;
					background: #000;
					border-radius: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					> text {
						font-weight: 400;
						font-size: 28rpx;
						color: $xxf-gold;
					}
				}
			}
			.coupon {
				margin-top: 20rpx;
				width: 690rpx;
				background: #fff;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				.couponTitle {
					padding: 30rpx;
					> text {
						font-weight: 400;
						font-size: 28rpx;
						color: #000;
					}
				}
				.couponArr {
					padding: 0 10rpx;
					width: calc(100% - 20rpx);
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.couponItem {
						margin: 10rpx;
						padding: 20rpx;
						width: calc(50% - 60rpx);
						height: 208rpx;
						background: $xxf-gold;
						box-shadow: 0rpx 4rpx 8rpx 0rpx $xxf-gold;
						border-radius: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						position: relative;
						.top {
							width: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.topLeft {
								width: 100%;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								> rich-text {
									font-weight: bold;
									font-size: 44rpx;
									color: #fff;
								}
							}
							.topRight {
								width: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								> text {
									width: 100%;
									font-weight: 400;
									font-size: 28rpx;
									color: #fff;
									text-align: center;
								}
							}
						}
						.bottom {
							margin-top: 15rpx;
							width: 100%;
							height: 58rpx;
							background: #000;
							border-radius: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							> text {
								font-weight: 400;
								font-size: 28rpx;
								color: #fff;
							}
						}
						.corner {
							position: absolute;
							top: 0;
							right: 0;
							background: rgba(255, 255, 255, 0.8);
							border-top-right-radius: 20rpx;
							border-bottom-left-radius: 20rpx;
							> text {
								padding: 4rpx 12rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: $uni-secondary-color;
							}
						}
					}
				}
			}
		}
	}
}
